<!-- 喜欢我的页面 -->
<template>
  <view class="container">
    <view class="header">喜欢我的</view>
    <view class="list">
      <view class="item" v-for="(item, index) in likedMe" :key="index">
        <image :src="item.avatar" class="item-img"></image>
        <view class="item-info">
          <text class="name">{{ item.nickname }}</text>
          <text class="age">{{ item.age }}岁</text>
          <text class="desc">{{ item.about_me }}</text>
          <view class="buttons">
            <text class="detail-button" @click="viewDetails(item)">查看详情</text>
            <!-- <text class="contact-button" @click="contactPerson(item)">联系他/她</text> -->
            <!-- 只对相互喜欢的用户显示聊天按钮 -->
            <text v-if="item.is_mutual" class="contact-button" @click="startChat(item)">
              开始聊天
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      likedMe: []
    };
  },
  onLoad() {
    this.cxlove();
  },

  methods: {
    viewDetails(item) {
      uni.navigateTo({
        url: "/pagesA/details/details?id=" + item.id
      })
      console.log('查看详情:', item.id);
      // 添加跳转到详情页面的逻辑
    },
    contactPerson(item) {
      console.log('联系他/她:', item);
      // 添加联系逻辑
    },
    async startChat(item) {
      const myId = uni.getStorageSync('my_info').id;
      
      // 创建或获取会话
      const res = await this.$myRuquest({
        url: '/index/dsnv.chat/getOrCreateSession',
        method: 'POST',
        data: {
          user1_id: myId,
          user2_id: item.id
        }
      });
      
      if (res.data.code === 200) {
        uni.navigateTo({
          url: `/pages/chat/detail?session_id=${res.data.data.id}&other_user_id=${item.id}`
        });
      } else {
        uni.showToast({
          title: '创建会话失败',
          icon: 'none'
        });
      }
    },
    //查询
    async cxlove() {
      var launch = uni.getStorageSync('my_info');
      const res = await this.$myRuquest({
        url: '/index/dsnv.index/cxloveme?id=' + launch.id
      })
      if (res.data.code == 200) {
        this.likedMe = res.data.data
      }
    },
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}

.item-img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin-right: 10px;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.age {
  font-size: 14px;
  color: #888;
}

.desc {
  font-size: 14px;
  color: #555;
}

.buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.detail-button,
.contact-button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  size: mini;
}

.detail-button {
  background-color: #4CAF50;
  color: white;
  size: mini;

}

.contact-button {
  background-color: #2196F3;
  color: white;
}
</style>